<template>
  <div class="main-div">
      <el-card class="box-card">
        <div class="top-title">
          <div class="top-title-left">
            租赁车辆推荐
          </div>
          <div class="top-title-right">
              <el-button type="success" @click="getRentalCar" round>查看更多</el-button>
          </div>
        </div>
        <div  class="text item" v-for="item in goodsList" :key="item.id">
          <el-image
              style="width: 250px; height: 150px"
              :src="baseUrl+item.headImg"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :initial-index="4"
              fit="cover"
          />
          <span style="display:inline-block;margin-top: 10px;">{{item.heading}}</span>
          <button class="button-class"  @click="getCarDetail(item.id)">立即查看</button>
        </div>

      </el-card>
    </div>
</template>
<script setup>
import {onMounted, ref} from "vue"
import {router} from "@/router/index.js"
import axios from "@/axios.js"

const baseUrl = '../../public/img/'

onMounted(()=>{

  findHomeSell()
})

const getRentalCar = ()=>{
  router.push("/rental")
}
const goodsList = ref([{

}])
const findHomeSell = ()=>{
  axios.get("/goods/home/findHomeSell").then(res=>{
      goodsList.value = res.data
  })
}

const getCarDetail = (id)=>{
   router.push(`/carDetail/${id}`)
}


</script>
<style scoped>
.main-div{
  height: 661px;
  background-color: #F9F9F9;

}
.text {
  margin-top: 20px;
  margin-left: 30px;
  font-size: 14px;
  width: 265px;
  height: 200px;
  background-color: #F4F4FA;
  display: inline-block;
  border: 2px solid #F4F4FA;

}

.item {
  padding-left: 14px;
}

.box-card{
  align-items: center;
  width: 1000px;
  margin-left: 230px;

}

/*顶部标题*/
.top-title{
  width: 1000px;
  margin-bottom: 10px;
}
.top-title-left{
  display: inline-block;
  text-align: center;
  width: 130px;
  margin-left: 25px;
  font-size: 20px;
  font-weight: bold;
  border-bottom: 3px solid green;
}
.top-title-right{
  display: inline-block;
  margin-left: 700px;
}

.button-class{
  width: 80px;
  height: 20px;
  margin-left: 30px;
  background-color: #FECE72;
  border: none;
  font-size: 13px;
}
.button-class:hover{
  cursor: pointer;
}


</style>